---
name: Adding interactivity
title: "Conversational Onboarding: observe users"
route: /docs/onscreen-guidance/observing
menu: On screen guidance
meta:
  - name: description
    content: Digital adoption. Create tutorial delivered proactively or on demand
  - name: keywords
    content: product tours tutorials digital adoption
---

import { FaEllipsisV } from "react-icons/fa";


# Observe user behaviour

In the [previous section](/docs/onscreen-guidance/highlighting) we learned how to highlight elements on the screen.
In this section we'll learn how to observe user behaviour and orchestrate a tutorial.

To add steps to our tutorial we must wait until the user has performed the expected action (or not), and then give them the next instruction.

There are two categories of events to observe:

- Interactions on a page: you can observe mouse events such as clicks or hovers, interactions with form inputs, etc.
- Page changes: you can also observe user navigation if you expect the user going to another page.

## Observe and act on page interactions

In the [previous section](/docs/onscreen-guidance/highlighting), we hightlighted the **Resources** using the response menu.

The next step of the tutorial is to highlight the **Mortgage demo** item under **Resources** once the user hover **Resources**.


### Enable page changes

The first step is to observe page change events. To do this, open the **behaviour** tab in the response menu, and enable **Observe interactions**.

<video autoplay muted loop width="100%" controls>
  <source src="../../videos/guiding_observe_interactions.m4v" type="video/mp4"/>
  Your browser does not support the video tag.
</video>

### Add the observer

We want to wait until the user hovers the **Resources** menu item. To do that we must add an a observer with 2 parameters

- The **selector** of the **Resources** menu (same as [highlight](/docs/onscreen-guidance/highlighting))
- The **event** you want to obvserve: `mouseover`
- A **callback intent**: when the event occurs, a user payload will be sent to the dialogue engine. The next instruction will be a response to that intent.

<video autoplay muted loop width="100%" controls>
  <source src="../../videos/guiding_observe_interactions_2.m4v" type="video/mp4"/>
  Your browser does not support the video tag.
</video>

<Important type='info' title="Understanding callback intent">
  Botfront is a conversational platform. Dialogues are combinations of user utterances or actions followed by bot responses or actions.
  <br />
  When the user hovers the <strong>Resources</strong> menu, it is considered as a user action and a user action containing an intent is sent. You may or may not add example utterances to characterize this intent. For example, if you want to allow the user to say something like <i>next, please</i> or <i>Move on</i> you can add those NLU examples.
</Important>

### Add the next step

Now that we have established that when the user hovers the **Resources** menu the `next` intent will be triggered, we can continue our story.
The following video shows how to add a next instruction and to highlight the **Mortgage demo** item inside **Resources**.
Additionally, it demonstrates how you can change the style by adding an existing css class.

<video autoplay muted loop width="100%" controls>
  <source src="../../videos/guiding_observe_interactions_3.m4v" type="video/mp4"/>
  Your browser does not support the video tag.
</video>

## Observe and act on page changes

> **Note: there is a typo in the video**: the response should be "Click the mortgage demo menu item" and not "Hover..."

Since **Mortgage demo** is a link, the user is going to leave the page when they clicks. Therefore page interactions won't work here: we'll use **page changes**.

The following video shows how we can direct a user to another page:

<video autoplay muted loop width="100%" controls>
  <source src="../../videos/guiding_observe_interactions_4.m4v" type="video/mp4"/>
  Your browser does not support the video tag.
</video>

Let's get into the video in more details:

1. We added a page change observer to the the _Hover the Mortgage demo menu item_ bot response.
2. We added the expected destination URL and set `next` as a callback intent. For page changes, we can also add an error callback intent which will be sent if the user lands somewhere else. We can then treat that error in a different story.
3. In our story, we added the `next` user payload corresponding to the user reaching the expected page.
4. We added a bot response that will appear once the user lands on the new page.

<Important type='tip' title='Using buttons in tutorials'>
  As seen in the video above, you can use buttons to pause the tutorial with an intro or an explanation. When the user clicks the button, it will just resume the tutorial flow.
</Important>

<Important type='info' title='Working with different environments'>
  You may have noticed in the video that the url starts with <block>http://localhost:8000</block>, which is a typical local development environment.
  When we deploy this virtual assistant, we won't need to replace the protocol, host and port parts of the URLs. They are simply ignored
</Important>

## Observe interaction in a form

In the following video we show how to guide a user through the use of a form field:
<video autoplay muted loop width="100%" controls>
  <source src="../../videos/guiding_observe_interactions_5.m4v" type="video/mp4"/>
  Your browser does not support the video tag.
</video>

Let's go into more details:

1. We continued our dialogue with the next instruction: adding an amount in an input field
2. We got the amount input field selector and highlighted it in Botfront. We added a custom style
3. We added an observer **on the same selector**. We selected `onchange` which is triggered when the user hits **Enter** after the content of the input field has changed.
4. In the conversation we add a new turn ending with a tutorial completion message.

The result can be seen in the following video:
<video autoplay muted loop width="100%" controls>
  <source src="../../videos/guiding_observe_interactions_6.m4v" type="video/mp4"/>
  Your browser does not support the video tag.
</video>

<Important type='tip' title='Form field selectors'>
  When observing a form field, try to not to select the input itself, but the surrounding element: form field class change dynamically when the user clicks on it. This might make your selector ineffective once the user starts typing. 
  in our example, we picked a selector containing both the label and the input field.
</Important>